<template>
    <span class="center-container">{{ form.goodInfoName }}-商品溯源</span>
    <br>
    <div class="center-container">
        <van-image width="200" height="200" :src="form.coverImg" radius="15" />
        <!-- <img :src="form.coverImg" width="200" height="200" style="border-radius: 15px;"> -->
    </div>
    <div style="font-weight: bolder;font-size:larger;" class="center-container">{{ form.goodInfoName }}</div>

    <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;">
        <table style="width: 100%;">
            <tr>
                <td style="font-weight: bolder;color:dodgerblue;text-align: center;">{{ form.productionBatches }}</td>
                <td style="font-weight: bolder;color:dodgerblue;text-align: center;">{{ form.shelfLife }}天</td>
            </tr>
            <tr>
                <td style="text-align: center;">生产批次</td>
                <td style="text-align: center;">保质期</td>
            </tr>
            <tr>
                <td style="font-weight: bolder;color:dodgerblue;text-align: center;">{{ form.productionLicenseCode }}
                </td>
                <td style="font-weight: bolder;color:dodgerblue;text-align: center;">{{ form.manufacturers }}</td>
            </tr>
            <tr>
                <td style="text-align: center;">生产许可证号</td>
                <td style="text-align: center;">生产企业</td>
            </tr>
        </table>
    </el-card>
    <!-- 产检报告图片 -->
    <div style="margin-left: 8%;margin-top: 15px;">产品检验报告</div>
    <div class="center-container" style="margin-bottom: 10px;">
        <img v-for="item in simageList.slice(0,2)" :src="item.url" width="100" height="100"
            style="margin-right: 10px;border-radius: 15px" />
        <table
            style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;"
            @click="openimgC">更多图片</table>
    </div>

    <div class="center-container">
    <van-tabs v-model:active="active" type="card" style="width: 100%;" scrollspy sticky>
        <van-tab title="养殖信息" :index="1">      
            <div> 
                <table>
                    <tr>
                        <td>
                            <table style="width:6px;height:23px;margin-left:25px;margin-top:30px;border-radius:12px;background-color:dodgerblue;margin-bottom:10px"></table>
                        </td>
                        <td>
                            <span style="font-size:larger; font-weight: bolder;margin-top: 23px;float: left;margin-left: -350px;">养殖信息</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div>
                                <table style="margin-left:15%">
                                    <tr>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 100px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">{{ cultivation.variety
                                                    }}</span>
                                                <br>
                                                <span>品种</span>
                                            </el-card>
                                        </td>
                                        <td>
                                            <el-card style="width: 180px;height: 100px;border-radius: 15px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue">{{ cultivation.source
                                                    }}</span>
                                                <br>
                                                <span>来源</span>
                                            </el-card>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 100px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">{{cultivation.cultivationDay }}天</span>
                                                <br>
                                                <span>饲养天数</span>
                                            </el-card>
                                        </td>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 100px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">{{ cultivation.feedBrands
                                                    }}</span>
                                                <br>
                                                <span>饲养品牌</span>
                                            </el-card>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 100px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">{{cultivation.cultivationHead }}</span>
                                                <br>
                                                <span>饲养负责人</span>
                                            </el-card>
                                        </td>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 100px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">{{cultivation.chuLanDate.substring(0, 10).replace("-", "年").replace("-", "月") }}日</span>
                                                <br>
                                                <span>出栏日期</span>
                                            </el-card>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>   
                <!-- 保健信息 -->
                <span style="margin-left: 8%;">保健信息</span>
                <div class="center-container">
                                <van-steps direction="vertical" :active="healthCareList.length">
                                    <van-step v-for="item in healthCareList" :key="item.healthCareId">
                                        <el-card style="border-radius: 15px;">  
                                            <h3 style="font-weight: bolder;color:dodgerblue;text-align: center;">第{{ item.cultivationDay}}天</h3>
                                            <p style="font-size:larger;font-weight:600;margin-top:5px">保健方式:<van-tag type="primary" style="font-size:larger;font-weight:600;margin-top:5px" size="large">{{item.healthCareMethod}}</van-tag></p>
                                            <p style="font-size:larger;font-weight:600;margin-top:5px">保健方法:<van-tag type="primary" style="font-size:larger;font-weight:600;margin-top:5px" size="large">{{item.healthCareType}}</van-tag></p>
                                        </el-card>
                                    </van-step>
                                </van-steps>
                            </div>
                <!-- 动产证 -->
                <span style="margin-left: 8%;">动产证</span>
                            <div class="center-container" style="margin-bottom: 10px;">
                                <img v-for="item in dyimageList" :src="item.url" width="100" height="100"
                                    style="margin-right: 10px;border-radius: 15px" />
                                <table
                                    style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;"
                                    @click="openimgD">更多图片</table>
                            </div>
                <!-- 养殖企业信息 -->
                <span style="margin-left: 8%;">养殖企业信息</span>
                <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;">
                    <table style="width: 100%;">
                        <tr>
                            <td style="font-weight: bolder;color:dodgerblue;text-align: center;" colspan="2">{{ enterprise.farms }}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bolder;color:dodgerblue;text-align: center;">{{ enterprise.head }}
                            </td>
                            <td style="font-weight: bolder;color:dodgerblue;text-align: center;">{{ enterprise.herdsNum }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">负责人</td>
                            <td style="text-align: center;">存栏数量</td>
                        </tr>
                    </table>
                </el-card>
                <!-- 企业照片 -->
                <span style="margin-left: 8%;">企业照片</span>
                <div class="center-container" style="margin-bottom: 10px;">
                    <img v-for="item in qeimageList.slice(0,2)" :src="item.url" width="100" height="100"
                        style="margin-right: 10px;border-radius: 15px" />
                    <table
                        style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;"
                        @click="openimgQ">更多图片</table>
                </div>
                <div class="line"></div>
            </div>
        </van-tab>
        <van-tab title="屠宰信息" :index="2">      
            <div > 
                <table>
                    <tr>
                        <td>
                            <table style="width:6px;height:23px;margin-left:25px;margin-top:30px;border-radius:12px;background-color:dodgerblue;margin-bottom:10px"></table>
                        </td>
                        <td>
                            <span style="font-size:larger; font-weight: bolder;margin-top: 23px;float: left;margin-left: -350px;">屠宰信息</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div>
                                <table style="margin-left:15%">
                                    <tr>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 120px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">
                                                    {{slaughter.productionBatches}}
                                                </span>
                                                <br>
                                                <span>批次</span>
                                            </el-card>
                                        </td>
                                        <td>
                                            <el-card style="width: 180px;height: 120px;border-radius: 15px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue">{{ 
                                                 slaughter.avgWeight
                                                    }}公斤</span>
                                                <br>
                                                <span>到场均重</span>
                                            </el-card>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 120px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">
                                                    {{slaughter.presentTime.substring(0, 19).replace("-","年").replace("-", "月").replace("T","日")}}
                                                </span>
                                                <br>
                                                <span>到场时间</span>
                                            </el-card>
                                        </td>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 120px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">
                                                    {{ slaughter.slaughterTime.substring(0, 19).replace("-","年").replace("-","月").replace("T", "日 ") }}
                                                    </span>
                                                <br>
                                                <span>屠宰时间</span>
                                            </el-card>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>   
                <!-- 食品安全 -->
                <span style="margin-left: 8%;">食品安全信息</span>
                            <div class="center-container" style="margin-bottom: 10px;">
                                <img v-for="item in zTImageList.slice(0,2)" :src="item.url" width="100" height="100"
                                    style="margin-right: 10px;border-radius: 15px" />
                                <table
                                    style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;"
                                    @click="openimgST">更多图片</table>
                            </div>
                <!-- 屠宰企业信息 -->
                <span style="margin-left: 8%;">屠宰企业信息</span>
                <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;">
                    <table style="width: 100%;">
                        <tr>
                            <td style="font-weight: bolder;color:dodgerblue;text-align: center;" colspan="2">{{ enterprise.enterpriseName }}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bolder;color:dodgerblue;text-align: center;">
                                <van-tag type="primary" size="large">
                                    {{enterprise.tuZaiDate.substring(0,10).replace("-", "年").replace("-", "月") }}日
                                </van-tag>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">{{ enterprise.provinceName }}&nbsp;&nbsp;{{enterprise.cityName }}&nbsp;&nbsp;{{ enterprise.countyName }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">{{ enterprise.companyProfile }}</td>
                        </tr>
                    </table>
                </el-card>
                <!-- 企业照片 -->
                <span style="margin-left: 8%;">企业照片</span>
                <div class="center-container" style="margin-bottom: 10px;">
                    <img v-for="item in qeimageList.slice(0,2)" :src="item.url" width="100" height="100"
                        style="margin-right: 10px;border-radius: 15px" />
                    <table
                        style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;"
                        @click="openimgQ">更多图片</table>
                </div>
                <div class="line"></div>
            </div>
        </van-tab>
        <van-tab title="深加工信息" :index="3">
            <div > 
                <table>
                    <tr>
                        <td>
                            <table style="width:6px;height:23px;margin-left:25px;margin-top:30px;border-radius:12px;background-color:dodgerblue;margin-bottom:10px"></table>
                        </td>
                        <td>
                            <span style="font-size:larger; font-weight: bolder;margin-top: 23px;float: left;margin-left: -330px;">深加工信息</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div>
                                <table style="margin-left:15%">
                                    <tr>
                                        <td>
                                            <el-card
                                                style="width: 180px;height: 120px;border-radius: 15px;margin-right: 20px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue;">
                                                    {{processing.team}}
                                                </span>
                                                <br>
                                                <span>班组</span>
                                            </el-card>
                                        </td>
                                        <td>
                                            <el-card style="width: 180px;height: 120px;border-radius: 15px;background-color:paleturquoise">
                                                <span style="font-weight: bolder;font-size: larger;color:dodgerblue">{{ 
                                                 processing.head
                                                    }}</span>
                                                <br>
                                                <span>负责人</span>
                                            </el-card>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>   
                <!-- 食品安全 -->
                <span style="margin-left: 8%;">食品安全信息</span>
                <div class="center-container" style="margin-bottom: 10px;">
                    <img v-for="item in PSimageList.slice(0,2)" :src="item.url" width="100" height="100" style="margin-right: 10px;border-radius: 15px" />
                    <table style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;" @click="openimgSS">更多图片</table>
                </div>

                <!-- 原料/辅料/添加剂/包材 -->
                <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;margin-top:15px">
                    <van-tag type="primary" size="large">原料</van-tag> 
                    <table style="width: 100%;">
                        <tr>
                            <td style="text-align: center;">生产批次:{{ rawmaterial.rawmaterialProductionBatches }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <div class="center-container" style="margin-bottom: 10px;">
                                    <img v-for="item in rYimageList.slice(0,2)" :src="item.url" width="100" height="100" style="margin-right: 10px;border-radius: 15px" />
                                    <table style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;" @click="openimgY">更多图片</table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </el-card>
                <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;margin-top:15px">
                    <van-tag type="primary" size="large">辅料</van-tag> 
                    <table style="width: 100%;">
                        <tr>
                            <td style="text-align: center;">生产批次:{{ accessories.accessOriesProductionBatches }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <div class="center-container" style="margin-bottom: 10px;">
                                    <img v-for="item in aFimageList.slice(0,2)" :src="item.url" width="100" height="100" style="margin-right: 10px;border-radius: 15px" />
                                    <table style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;" @click="openimgF">更多图片</table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </el-card>
                <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;margin-top:15px">
                    <van-tag type="primary" size="large">添加剂</van-tag> 
                    <table style="width: 100%;">
                        <tr>
                            <td style="text-align: center;">生产批次:{{ additive.additiveProductionBatches }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <div class="center-container" style="margin-bottom: 10px;">
                                    <img v-for="item in aTimageList.slice(0,2)" :src="item.url" width="100" height="100" style="margin-right: 10px;border-radius: 15px" />
                                    <table style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;" @click="openimgJ">更多图片</table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </el-card>
                <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;margin-top:15px">
                    <van-tag type="primary" size="large">包材</van-tag> 
                    <table style="width: 100%;">
                        <tr>
                            <td style="text-align: center;">生产批次:{{ packagingmaterials.packagingmaterialsProductionBatches }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <div class="center-container" style="margin-bottom: 10px;">
                                    <img v-for="item in bPimageList.slice(0,2)" :src="item.url" width="100" height="100" style="margin-right: 10px;border-radius: 15px" />
                                    <table style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;" @click="openimgB">更多图片</table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </el-card>
                <!--  -->
                <!-- 深加工企业信息 -->
                <span style="margin-left: 8%;">深加工企业信息</span>
                <el-card style="width: 400px;margin-left: auto;margin-right: auto;border-radius: 15px;">
                    <table style="width: 100%;">
                        <tr>
                            <td style="font-weight: bolder;color:dodgerblue;text-align: center;" colspan="2">{{ enterprise.enterpriseName }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <van-tag type="primary" size="large">生产许可证号:{{ enterprise.productionLicenseCode }}</van-tag> 
                            </td>
                        </tr>
                    </table>
                </el-card>
                <!-- 企业照片 -->
                <span style="margin-left: 8%;">企业照片</span>
                <div class="center-container" style="margin-bottom: 10px;">
                    <img v-for="item in qeimageList.slice(0,2)" :src="item.url" width="100" height="100"
                        style="margin-right: 10px;border-radius: 15px" />
                    <table
                        style="width: 100px;height: 100px;background-color:cornflowerblue;border-radius: 15px;color: white;text-align: center;line-height: 100px;"
                        @click="openimgQ">更多图片</table>
                </div>
                <div class="line"></div>
            </div>
        </van-tab>
    </van-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const form = reactive({
    traceabilityId: 4,// route.query.traceabilityId,
    goodInfoName: "",
    productionBatches: 20241101123001,//route.query.productionBatches,
    shelfLife: '',
    productionLicenseCode: "",
    manufacturers: "",
    coverImg: "",
    createName: localStorage.getItem("userName"),
    createTime: new Date(),
    updateName: localStorage.getItem("userName"),
    updateTime: new Date(),
})
//返填
const backfill = () => {
    axios.get("/api/Traceability/Backfill", {
        params: {
            ProductionBatches: form.productionBatches,
            TraceabilityId: form.traceabilityId
        }
    })
        .then(res => {
            // console.log(form)
            // form.traceabilityId = res.data.data.traceabilityId
            form.goodInfoName = res.data.data.goodInfoName
            // form.productionBatches = res.data.data.productionBatches
            form.shelfLife = res.data.data.shelfLife
            form.productionLicenseCode = res.data.data.productionLicenseCode
            form.manufacturers = res.data.data.manufacturers
            form.coverImg = res.data.data.coverImg
            form.createName = res.data.data.createName
            form.createTime = res.data.data.createTime
            //返填养殖
            backfillCultivation();
            //显示保健
            getHealthCreaList();
            //显示企业
            // showEnterprise();
            //返填企业
            backfillEnterprise();
            //返填产检图片
            getImageList(form.traceabilityId);
            //返填屠宰信息
            backfillSlaughter();
            //返填深加工信息
            backfillProcessing();
            //返填原料信息
            getRawmaterial();
            //返填辅料信息
            getAccessories();
            //返填添加剂
            getAdditive();
            //返填包材
            getPackagingmaterials();
        })
        .catch(err => {
            console.log(err);
        })
}

//#region 溯源信息
//显示产检图片
const simageList: any = ref([])
const getImageList = (traceabilityId: any) => {
    axios.get("/api/Image/GetAllImages?TraceabilityId=" + traceabilityId)
        .then(res => {
            simageList.value = res.data.data
            // console.log(res.data.data)
        })
        .catch(err => {
            console.log(err);
        })
}
//图片预览
import { showImagePreview } from 'vant';
const openimg = () => {
    showImagePreview([
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ]);
}
//#endregion

//#region 养殖信息
//养殖信息
const cultivation = reactive({
    cultivationId: 0,
    variety: "",
    source: "",
    cultivationDay: '',
    feedBrands: "",
    cultivationHead: "",
    slaughterDate: "",
    chuLanDate: "",
    productionBatches: form.productionBatches,
    createName: localStorage.getItem("userName"),
    createTime: new Date(),
    updateName: localStorage.getItem("userName"),
    updateTime: new Date(),
})
//返填养殖信息
const backfillCultivation = () => {
    axios.get("/api/Cultivation/GetCultivationFirst", {
        params: {
            ProductionBatches: form.productionBatches
        }
    })
        .then(res => {
            cultivation.cultivationId = res.data.data.cultivationId
            cultivation.variety = res.data.data.variety
            cultivation.source = res.data.data.source
            cultivation.cultivationDay = res.data.data.cultivationDay
            cultivation.feedBrands = res.data.data.feedBrands
            cultivation.cultivationHead = res.data.data.cultivationHead
            cultivation.slaughterDate = res.data.data.slaughterDate
            cultivation.chuLanDate = cultivation.slaughterDate
            // console.log(cultivation);
            //返填动产证图片
            getDyImageList();
        })
        .catch(err => {
            console.log(err);
        })
}
//保健信息
const healthCare: any = reactive({
    healthCareArray: [
        {
            healthCareId: '',
            cultivationDay: '',
            healthCareType: "",
            healthCareMethod: "",
            productionBatches: form.productionBatches,
            createName: localStorage.getItem("userName"),
            createTime: new Date(),
            updateName: localStorage.getItem("userName"),
            updateTime: new Date(),
        }
    ]
});
//显示保健
const healthCareList: any = ref([])
const getHealthCreaList = () => {
    axios.get('/api/HealthCare/Show', {
        params: {
            ProductionBatches: form.productionBatches
        }
    })
        .then(res => {
            healthCareList.value = res.data.data
            // console.log(healthCareList.value)
        })
        .catch(err => {
            console.log(err);
        })
}
//显示动产证图片
const dyimageList = ref([])
const getDyImageList = () => {
    axios.get("/api/Image/GetDYImages?CultivationId=" + cultivation.cultivationId)
        .then(res => {
            dyimageList.value = res.data.data
        })
        .catch(err => {
            console.log(err);
        })
}
//#endregion

//#region 屠宰
    const slaughter = reactive({
        slaughterId: 0,
        productionBatches: form.productionBatches,
        avgWeight: '',
        presentTime: "",
        slaughterTime: "",
        createName: localStorage.getItem("userName"),
        createTime: new Date(),
        updateName: localStorage.getItem("userName"),
        updateTime: new Date(),
    })
    //返填屠宰信息
    const backfillSlaughter = () => {
    axios.get("/api/Slaughter/Show?ProductionBatches=" + form.productionBatches)
        .then(res => {
            slaughter.slaughterId = res.data.data.slaughterId
            slaughter.productionBatches = res.data.data.productionBatches
            slaughter.avgWeight = res.data.data.avgWeight
            slaughter.presentTime = res.data.data.presentTime
            slaughter.slaughterTime = res.data.data.slaughterTime
            slaughter.createName = res.data.data.createName
            slaughter.createTime = res.data.data.createTime
            // zTImage.slaughterId = res.data.data.slaughterId
            //返填/显示图片
            getZTImageList();
        })
        .catch(err => {
            console.log(err);
        })
    }
    //显示图片
    const zTImageList = ref([])
    const getZTImageList = () => {
        // console.log(slaughter.slaughterId)
        axios.get("/api/Image/GetZTImages?SlaughterId=" + slaughter.slaughterId)
            .then(res => {
                zTImageList.value = res.data.data
            })
            .catch(err => {
                console.log(err);
            })
    }
//#endregion

//#region 深加工
    const processing = reactive({
        processingId: 0,
        team: "",
        head: "",
        productionBatches: form.productionBatches,
        createName: localStorage.getItem("userName"),
        createTime: new Date(),
        updateName: localStorage.getItem("userName"),
        updateTime: new Date(),
    })
    const backfillProcessing = () => {
        axios.get("/api/Processing/GetProcessing", {
            params: {
                ProductionBatches: form.productionBatches
            }
        })
            .then(res => {
                processing.processingId = res.data.data.processingId
                processing.team = res.data.data.team
                processing.head = res.data.data.head
                processing.productionBatches = res.data.data.productionBatches
                processing.createName = res.data.data.createName
                processing.createTime = res.data.data.createTime
                // pSImage.processingId = res.data.data.processingId
                getPSimageList();
            })
            .catch(err => {
                console.log(err);
            })
    }
    //返填深加工图片
    const PSimageList = ref([])
    const getPSimageList = () => {
        // console.log(processing.processingId)
        axios.get("/api/Image/GetASImages?ProcessingId=" + processing.processingId)
            .then(res => {
                PSimageList.value = res.data.data
            })
            .catch(err => {
                console.log(err);
            })
    }
    //#region 原料
        const rawmaterial = reactive({
            rawmaterialId: 0,
            rawmaterialProductionBatches: '',
            productionBatches: form.productionBatches
        })
        //返填原料
        const getRawmaterial = () => {
            axios.get("/api/Rawmaterial/GetRawmaterial", {
                params: {
                    ProductionBatches: form.productionBatches
                }
            })
                .then(res => {
                    rawmaterial.rawmaterialId = res.data.data.rawmaterialId
                    rawmaterial.rawmaterialProductionBatches = res.data.data.rawmaterialProductionBatches
                    rawmaterial.productionBatches = res.data.data.productionBatches
                    // rYImage.rawmaterialId = res.data.data.rawmaterialId
                    getRYImageList();
                })
                .catch(err => {
                    console.log(err);
                })
        }
        //显示原料图片
        const rYimageList = ref([])
        const getRYImageList = () => {
            // console.log(enterprise.enterpriseId)
            axios.get("/api/Image/GetRYImages?RawmaterialId=" + rawmaterial.rawmaterialId)
                .then(res => {
                    rYimageList.value = res.data.data
                })
                .catch(err => {
                    console.log(err);
                })
        }
    //#endregion

    //#region 辅料
        const accessories = reactive({
            accessoriesId: 0,
            accessOriesProductionBatches: '',
            productionBatches: form.productionBatches
        })
        //返填辅料
        const getAccessories = () => {
            axios.get("/api/Accessories/GetAccessories", {
                params: {
                    ProductionBatches: form.productionBatches
                }
            })
                .then(res => {
                    accessories.accessoriesId = res.data.data.accessoriesId
                    accessories.accessOriesProductionBatches = res.data.data.accessOriesProductionBatches
                    accessories.productionBatches = res.data.data.productionBatches
                    // aFImage.accessoriesId = res.data.data.accessoriesId
                    getAFImageList();
                })
                .catch(err => {
                    console.log(err);
                })
        }
        //显示辅料图片
        const aFimageList = ref([])
        const getAFImageList = () => {
            // console.log(enterprise.enterpriseId)
            axios.get("/api/Image/GetAFImages?AccessoriesId=" + accessories.accessoriesId)
                .then(res => {
                    aFimageList.value = res.data.data
                })
                .catch(err => {
                    console.log(err);
                })
        }
    //#endregion

    //#region 添加剂
        const additive = reactive({
            additiveId: 0,
            additiveProductionBatches: '',
            productionBatches: form.productionBatches
        })
        const getAdditive = () => {
            axios.get("/api/Additive/GetAdditive", {
                params: {
                    ProductionBatches: form.productionBatches
                }
            })
                .then(res => {
                    additive.additiveId = res.data.data.additiveId
                    additive.additiveProductionBatches = res.data.data.additiveProductionBatches
                    additive.productionBatches = res.data.data.productionBatches
                    // aTImage.additiveId = res.data.data.additiveId
                    getATImageList();
                })
                .catch(err => {
                    console.log(err);
                })
        }
        //显示添加剂图片
        const aTimageList = ref([])
        const getATImageList = () => {
            // console.log(enterprise.enterpriseId)
            axios.get("/api/Image/GetATImages?AdditiveId=" + additive.additiveId)
                .then(res => {
                    aTimageList.value = res.data.data
                })
                .catch(err => {
                    console.log(err);
                })
        }
    //#endregion

    //#region 包材
        const packagingmaterials = reactive({
            packagingmaterialsId: 0,
            packagingmaterialsProductionBatches: '',
            productionBatches: form.productionBatches
        })
        //返填包材
        const getPackagingmaterials = () => {
            axios.get("/api/Packagingmaterials/GetPackagingmaterials", {
                params: {
                    ProductionBatches: form.productionBatches
                }
            })
                .then(res => {
                    packagingmaterials.packagingmaterialsId = res.data.data.packagingmaterialsId
                    packagingmaterials.packagingmaterialsProductionBatches = res.data.data.packagingmaterialsProductionBatches
                    packagingmaterials.productionBatches = res.data.data.productionBatches
                    // bPImage.packagingmaterialsId = res.data.data.packagingmaterialsId
                    getBPImageList();
                })
                .catch(err => {
                    console.log(err);
                })
        }
        //显示添加剂图片
        const bPimageList = ref([])
        const getBPImageList = () => {
            // console.log(enterprise.enterpriseId)
            axios.get("/api/Image/GetPBImages?PackagingmaterialsId=" + packagingmaterials.packagingmaterialsId)
                .then(res => {
                    bPimageList.value = res.data.data
                })
                .catch(err => {
                    console.log(err);
                })
        }
    //#endregion
//#endregion

//#region 企业
    //企业信息
    const enterprise = reactive({
        enterpriseId: 0,
        farms: "",
        head: "",
        herdsNum: '',
        enterpriseName: "",
        provinceId: '',
        cityId: '',
        countyId: '',
        provinceName: '',
        cityName: '',
        countyName: '',
        founded: "",
        companyProfile: "",
        productionLicenseCode: "",
        productionBatches: form.productionBatches,
        tuZaiDate: "",
        createName: localStorage.getItem("userName"),
        createTime: new Date(),
        updateName: localStorage.getItem("userName"),
        updateTime: new Date(),
    })
    //返填企业
    const backfillEnterprise = () => {
        axios.get("/api/Enterprise/GetEnterpriseByBatch", {
            params: {
                ProductionBatches: form.productionBatches
            }
        })
            .then(res => {
                enterprise.enterpriseId = res.data.data.enterpriseId
                enterprise.farms = res.data.data.farms
                enterprise.head = res.data.data.head
                enterprise.herdsNum = res.data.data.herdsNum
                enterprise.enterpriseName = res.data.data.enterpriseName
                // getProvinceList();
                enterprise.provinceId = res.data.data.provinceId
                enterprise.provinceName = res.data.data.provinceName
                // getCityList();
                enterprise.cityId = res.data.data.cityId
                enterprise.cityName = res.data.data.cityName
                // getCountyList();
                enterprise.countyId = res.data.data.countyId
                enterprise.countyName = res.data.data.countyName
                enterprise.founded = res.data.data.founded
                enterprise.tuZaiDate = enterprise.founded
                enterprise.companyProfile = res.data.data.companyProfile
                enterprise.productionLicenseCode = res.data.data.productionLicenseCode
                enterprise.productionBatches = res.data.data.productionBatches
                enterprise.createName = res.data.data.createName
                enterprise.createTime = res.data.data.createTime
                enterprise.updateName = res.data.data.updateName
                enterprise.updateTime = res.data.data.updateTime
                // qEImage.enterpriseId = res.data.data.enterpriseId
                // console.log(enterprise)
                //返填企业图片
                getQeImageList();
            })
            .catch(err => {
                console.log(err);
            })
    }
//#endregion

//#region 图片
    //显示企业图片
    const qeimageList = ref([])
    const getQeImageList = () => {
        // console.log(enterprise.enterpriseId)
        axios.get("/api/Image/GetQImages?EnterpriseId=" + enterprise.enterpriseId)
            .then(res => {
                qeimageList.value = res.data.data
                // console.log(qeimageList.value)
            })
            .catch(err => {
                console.log(err);
            })
    }
    //显示企业更多图片
    const openimgQ=()=>{
        const qArray=[];
        qeimageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示产检更多图片
    const openimgC=()=>{
        const qArray=[];
        simageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示动产证更多图片
    const openimgD=()=>{
        const qArray=[];
        dyimageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示食品更多图片(屠宰)
    const openimgST=()=>{
        const qArray=[];
        zTImageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示食品更多图片(深加工)
    const openimgSS=()=>{
        const qArray=[];
        PSimageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示原料更多图片
    const openimgY=()=>{
        const qArray=[];
        rYimageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示辅料更多图片
    const openimgF=()=>{
        const qArray=[];
        aFimageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示添加剂更多图片
    const openimgJ=()=>{
        const qArray=[];
        aTimageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
    //显示包材更多图片
    const openimgB=()=>{
        const qArray=[];
        bPimageList.value.forEach(x => {
            qArray.push(x.url);
        });
        showImagePreview({
        images: qArray,
        closeable: true,
        });
    }
//#endregion

//钩子
onMounted(() => {
    backfill();
})      
</script>

<!-- 内容居中 -->
<style scoped>
.center-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
}
</style>

<!-- 单个信息结束线 -->
<style>
.line {
  width: 80%; /* 或者你想要线的长度 */
  height: 2px; /* 线的宽度 */
  background-color: cornflowerblue; /* 线的颜色 */
  margin-left:10%
}
</style>